<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6" v-if="$store.state.user.userLevel === null">
          <el-form-item label="油企名称" prop="enterpriseId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="油站名称" prop="stationId" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择油站名称"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="时间">
            <el-date-picker
              v-model="datetimerange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 180px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单号" prop="orderNo">
            <el-input
              v-model="queryParams.orderNo"
              placeholder="请输入订单号"
              clearable
              size="small"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="手机号" prop="mobilePhone">
            <el-input
              v-model="queryParams.mobilePhone"
              placeholder="请输入手机号"
              clearable
              size="small"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="活动名称" prop="saleActivityName">
            <el-input
              v-model="queryParams.saleActivityName"
              placeholder="请输入活动名称"
              clearable
              size="small"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          @click="handleQuery"
          type="primary"
          size="mini"
          icon="el-icon-search"
        >
          搜索
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleReset" plain>
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleExport" plain>
          导出
        </el-button>
      </el-col>
    </el-row>
    <!-- 数据汇总 -->
    <el-row style="margin-bottom: 20px">
      <el-col :span="6">
        <span>合计金额(元): </span>
        <span>{{ sumData.amt || 0 }}</span>
      </el-col>
      <el-col :span="6">
        <span>订单笔数(笔): </span>
        <span>{{ sumData.orderCount || 0 }}</span>
      </el-col>
    </el-row>
    <el-table :data="orderList" style="width: 100%" v-loading="loading">
      <el-table-column
        prop=""
        label="序号"
        type="index"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-if="$store.state.user.userLevel === null"
        prop="enterpriseName"
        label="油企"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="stationName"
        label="油站"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="orderNo"
        label="订单号"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="saleActivityName"
        label="活动名称"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="customerName"
        label="用户姓名"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="mobilePhone"
        label="手机号"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="purchaseNum"
        label="购买数量"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="amt"
        label="支付金额"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="payType"
        label="支付方式"
        width="100"
        :formatter="payTypeFormater"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="payTime"
        label="支付时间"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="orderStatus"
        label="订单状态"
        :formatter="orderStatusFormater"
        show-overflow-tooltip
      />
      <el-table-column
        prop="shipmentStatus"
        label="虚拟商品发货状态"
        show-overflow-tooltip
        :formatter="shipmentStatusFormater"
        width="150"
      />

      <el-table-column prop="" label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleExitAmt(scope.row)"
            >退款</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { timeComparison } from "@/utils/timeConversion";
import {
  getKillActivityOrderListApi,
  refundKillOrderApi,
  getKillSumDataApi,
  exportKillApi,
} from "@/api/market/secondKill";
import {
  getStationList,
  listEnterpriseStation,
  getStationByEnterprise,
} from "@/api/dept";
import { enterpriseList } from "@/api/station/order";
export default {
  name: "OrderList",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseId: null,
        stationId: null,
        orderNo: "",
        mobilePhone: "",
        saleActivityName: "",
      },
      total: 0,
      orderList: [],
      loading: false,
      enterpriseList: [],
      stationList: [],
      datetimerange: [],
      sumData: {}, // 数据汇总统计
    };
  },
  created() {
    this.getEnterpriseList();
    this.getList();
    this.getKillSumData();
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      // 企业账号登录
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
  },
  methods: {
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    // 选择油企
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },

    // 查询油站列表
    async getStationList(val) {
      listEnterpriseStation({ enterpriseId: val, status: "1" }).then((res) => {
        this.stationList = res;
      });
    },

    // 获取秒杀订单列表
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      if (this.datetimerange && this.datetimerange.length) {
        params.beginTime = this.datetimerange[0];
        params.endTime = this.datetimerange[1];
      }

      // const time = timeComparison(30,"earching", params.beginTime, params.endTime);
      // if (!time) return (this.loading = false);

      const res = await getKillActivityOrderListApi(params);
      this.orderList = res.rows;
      this.total = res.total;
      this.loading = false;
    },

    // 查询秒杀订单总数
    async getKillSumData() {
      const params = { ...this.queryParams };
      if (this.datetimerange && this.datetimerange.length) {
        params.beginTime = this.datetimerange[0];
        params.endTime = this.datetimerange[1];
      }
      const res = await getKillSumDataApi(params);
      this.sumData = res.data;
    },

    // 查询
    handleQuery() {
      this.getList();
      this.getKillSumData();
    },
    // 重置
    handleReset() {
      this.resetForm("queryForm");
      this.datetimerange = [];
      this.getList();
      this.getKillSumData();
    },

    // 订单状态 格式
    orderStatusFormater(row) {
      const types = {
        0: "未支付",
        1: "已支付",
        2: "支付失败",
        3: "已退款",
      };
      return types[row.orderStatus];
    },

    // 虚拟商品发货状态 格式
    shipmentStatusFormater(row) {
      const types = {
        0: "未发放",
        1: "已发放",
        2: "发放失败",
        4: "已回退",
      };
      return types[row.shipmentStatus];
    },

    // 支付方式 目前秒杀订单只有微信支付
    payTypeFormater(row) {
      const types = {
        wx: "微信支付",
        zfb: "支付宝",
        xj: "现金支付",
        dzk: "电子卡支付",
        pos: "POS机支付",
        yzf: "预支付",
        kbzf: "卡包支付",
        yhk: "银行卡支付",
        cdk: "车队卡支付",
        dkq: "实体卡支付",
      };
      return types[row.payType];
    },
    // 退款
    handleExitAmt(row) {
      this.$confirm(`确定退款吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        await refundKillOrderApi(row.id);
        this.msgSuccess("退款成功");
        this.getList();
      });
    },

    // 导出
    handleExport() {
      const params = { ...this.queryParams };
      if (this.datetimerange && this.datetimerange.length) {
        params.beginTime = this.datetimerange[0];
        params.endTime = this.datetimerange[1];
      }

      // const time = timeComparison(30,"export", params.beginTime, params.endTime);
      // if (!time) return;

      exportKillApi(params).then((res) => {
        console.log("导出:", res);
        if (res.code === 200) {
          this.download(res.msg);
        }
      });
    },
  },
};
</script>
